<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        #demo {
            display: block;
            width: 323px;
            height: 430px;
            margin: 5px;
            position: relative;
            border: 1px solid #ccc;
        }

        #small-box {
            position: relative;
            /* z-index: 1; */
        }

        #float-box {
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }

        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 330px;
            width: 323px;
            height: 430px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 10;
        }

        #big-box img {
            position: absolute;
            z-index: 5
        }
    </style>
    <script>
        //页面加载完毕后执行
        window.onload = function () {
            //找五个个元素：demo，smallBox,foatBox,bigfloatBox,imgs,
            var objDemo = document.getElementById("demo");
            var objSmallBox = document.getElementById("small-box");
            var objFloatBox = document.getElementById("float-box");
            var objBigBox = document.getElementById("big-box");
            var objBigBoxImg = objBigBox.getElementsByTagName("img")[0];

            //给小盒子添加事件，移入和移出
            //移入：浮动的box和和bigBox显示
            objSmallBox.onmouseover = function () {
                objFloatBox.style.display = "block";
                objBigBox.style.display = "block";
            }
            //移除：浮动的box和bigBox隐藏
            objSmallBox.onmouseout = function () {
                objFloatBox.style.display = "none";
                objBigBox.style.display = "none";
            }

            //给小盒子添加鼠标移动事件
            objSmallBox.onmousemove = function (ev) {
                var _event = ev || window.event;//做兼容性，兼容IE
                //1计算值：
                console.log(objFloatBox.offsetWidth, objSmallBox.offsetLeft, 1)
                var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
                var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

                //5.优化，在前面加判断,不让其溢出，加判断
                if (left < 0) left = 0;
                if (top < 0) top = 0;
                if (left > objSmallBox.offsetWidth - objFloatBox.offsetWidth)
                    left = objSmallBox.offsetWidth - objFloatBox.offsetWidth;
                if (top > objSmallBox.offsetHeight - objFloatBox.offsetHeight)
                    top = objSmallBox.offsetHeight - objFloatBox.offsetHeight;

                //2把值赋值给放大镜
                objFloatBox.style.left = left + "px";
                objFloatBox.style.top = top + "px";

                //3计算比例
                var percentX = left / (objSmallBox.offsetWidth - objFloatBox.offsetWidth);
                var percentY = top / (objSmallBox.offsetHeight - objFloatBox.offsetHeight);

                //4利用这个比例计算距离后赋值给右侧的图片
                objBigBoxImg.style.left = -percentX * (objBigBoxImg.offsetWidth - objBigBox.offsetWidth) + "px";
                objBigBoxImg.style.top = -percentY * (objBigBoxImg.offsetHeight - objBigBox.offsetHeight) + "px";
            }

        }
    </script>
</head>

<body>
    <div id="demo">
        <div id="small-box">
            <div id="float-box"></div>
            <img
                src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg_430x430q90.jpg" />
        </div>
        <div id="big-box">
            <img
                src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg" />
        </div>
    </div>
</body>

</html>